<template>
  <div class="dashboard">
    <div class="dashboard-in">
      <template v-for="item in dashData" :key="item.key">
        <router-link :class="['item', item.name === 'mine' ? 'item1' : 'item2']" :to="item.key">
          <img class="dashboardimg" :src="'/src/style/img/dashboard/' + item.icon" alt="" />
          <p class="size16 sizefw">{{ t(item.name) }}</p>
        </router-link>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
import { reactive } from 'vue'
let dashData = reactive([
  {
    name: 'price',
    key: '/price/price',
    icon: 'hangqing.png',
  },
  {
    name: 'reportForm',
    key: '/reportForm/reportForm',
    icon: 'order.png',
  },
  {
    name: 'payApply',
    key: '/payApply/payApply',
    icon: 'wallet.png',
  },
  {
    name: 'notice',
    key: '/notice/notice',
    icon: 'megaphone.png',
  },
  {
    name: 'rule',
    key: '/rule/rule',
    icon: 'balance.png',
  },
  {
    name: 'customerService',
    key: '/customerService/customerService',
    icon: 'headphone.png',
  },
  {
    name: 'mine',
    key: '/mine/mine',
    icon: 'account.png',
  },
  {
    name: 'mine',
    key: '/setting/setting',
    icon: 'setting.png',
  },
])
</script>

<style lang="scss" scoped>
@import '../../style/scss/dashboard.scss';
</style>
